<template>
  <div class="query-container">
    <span class="btn" @click="isShowPopup = true">
      <van-icon name="search" /> 查询筛选
    </span>
    [{{param}}]
    <van-popup v-model="isShowPopup" position="bottom" class="popup">
      <van-nav-bar :title="title" left-text="取消" right-text="确定"  @click-left="onClickLeft" @click-right="onClickRight" />
      <div class="content">
        <slot></slot>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'Query',
  components: {},
  props: {
    title: {
      type: String,
      default: '筛选查询'
    },
    param: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      isShowPopup: false
    }
  },
  computed: {},
  created () {},
  mounted () {},
  watch: {},
  methods: {
    onClickLeft () {
      this.$emit('cancel')
      this.isShowPopup = false
    },
    onClickRight () {
      this.$emit('submit')
      this.isShowPopup = false
    }
  }
}
</script>

<style scoped lang='less'>
.query-container {
  margin-bottom: 10px;
  .btn {
    color: #1989fa;
  }
  .popup {
    padding-bottom: 15px;
  }
  .content {
    // border-bottom: solid 1px #f5f5f5;
  }
}
</style>
